<template>
    <div class="weather">
        <div class="_title">今日天气</div>
        <div class="_temperature">
            {{ cityWeather?.city }} {{ cityWeather?.temperature }}℃
        </div>
        <div class="_weather">
            天气: {{ cityWeather?.weather }}
        </div>
        <div class="_windDirection">
            {{ cityWeather?.windDirection }}风({{ cityWeather?.windPower }}级)
        </div>
        <div class="_humidity">
            空气湿度 {{ cityWeather?.humidity }}%
        </div>
        <div class="tips">*数据来源<span class="gaode" @click="toGaode">高德地图</span></div>
    </div>
</template>

<script setup lang="ts">
import type { Weather } from '@/hooks/cityWeather/cityWeather';
defineProps<{ cityWeather: Weather | undefined }>()
const emit = defineEmits(["toGaode"])
const toGaode = ()=>{
    emit("toGaode")
}
</script>

<style lang="scss" scoped>
.weather {
    width: 100%;
    height: 250px;
    padding: 16px;
    box-sizing: border-box;

    ._title {
        width: 100%;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
    }

    ._temperature {
        font-size: 32px;
        margin-top: 12px;
    }

    ._weather {
        font-size: 16px;
        margin-top: 6px;
    }

    ._windDirection {
        font-size: 16px;
        margin-top: 6px;
    }

    ._humidity {
        font-size: 16px;
        margin-top: 6px;
    }

    .tips {
        position: absolute;
        width: 100%;
        font-size: 12px;
        bottom: 6px;
    }

    .gaode {
        color: #61adda;
        cursor: pointer;
        margin-left: 6px;
    }
}
</style>